<%--
  Created by IntelliJ IDEA.
  User: Maibenben
  Date: 2020/1/7
  Time: 19:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>员工列表</title>
    <%
        pageContext.setAttribute ("path", request.getContextPath ());
    %>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${path}/js/jquery-3.3.1.min.js"></script>
    <link href="${path}/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${path}/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        //JQuery实现全选与全不选
        $(function () {
            $("#checkAll").bind("click",function () {
                $('input[name="check"]').each(function () {
                    $(this).prop("checked",$("#checkAll").is(":checked"));
                })
            })
        });

    </script>
</head>
<body>

<div class="container">
    <h1>SSM_CRUD</h1>

    <div style="float: right; margin-top:50px;margin-bottom: 10px">
        <a class="btn btn-primary">添加</a>
        <a class="btn btn-danger">删除选中</a>
    </div>

    <table class="table table-striped">
        <thead>
        <tr>
            <th><input type="checkbox" id="checkAll"/></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>邮箱</th>
            <th>部门编号</th>
            <th>部门名称</th>
            <th colspan="2">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${pageInfo.list}" var="employee">
            <tr>
                <td><input type="checkbox" name="check"></td>
                <td>${employee.empId}</td>
                <td>${employee.empName}</td>
                <td>${employee.gender}</td>
                <td>${employee.email}</td>
                <td>${employee.department.deptId}</td>
                <td>${employee.department.deptName}</td>
                <td>
                    <button type="button" class="btn btn-success btn-sm" href="#">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑
                    </button>
                    <button type="button" class="btn btn-danger btn-sm" href="#">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
                    </button>
                </td>

            </tr>
        </c:forEach>
        </tbody>
    </table>

    <div style=" float: left;margin-top: 40px;position:absolute;left:50%;transform: translate(-50%,-50%)">
        当前第 <a class="btn" style="background-color: black;color: white" disabled="disabled">${pageInfo.pageNum}</a> 页,
        共有<a class="btn" style="background-color: black;color: white" disabled="disabled">${pageInfo.pages}</a>页，
        总计<a class="btn" style="background-color: black;color: white" disabled="disabled">${pageInfo.total}</a>条记录
    </div>
    <div style="float: right;margin: 60px">
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-lg">
                <li><a href="${path}/employee/getAllEmp?pageNum=1">首页</a></li>
                <li>
                    <a href="${path}/employee/getAllEmp?pageNum=${pageInfo.pageNum - 1 > 0 ? pageInfo.pageNum - 1 : 1}"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <c:forEach items="${pageInfo.navigatepageNums}" var="i" step="1">
                    <c:if test="${pageInfo.pageNum==i}">
                        <li class="active"><a href="${path}/employee/getAllEmp?pageNum=${i}">${i}</a></li>
                    </c:if>
                    <c:if test="${pageInfo.pageNum!=i}">
                        <li><a href="${path}/employee/getAllEmp?pageNum=${i}">${i}</a></li>
                    </c:if>
                </c:forEach>

                <li>
                    <a href="${path}/employee/getAllEmp?pageNum=${pageInfo.pageNum + 1 > pageInfo.pages ? pageInfo.pages : pageInfo.pageNum + 1}"
                       aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li><a href="${path}/employee/getAllEmp?pageNum=${pageInfo.pages}">尾页</a></li>
            </ul>
        </nav>
    </div>

</div>


</body>
</html>
